<template>
  <div>
    <el-form
      ref="addForm"
      :rules="addFormRules"
      :model="addForm"
      label-width="80px"
    >
      <el-form-item label="分类名" prop="catename">
        <el-input
          v-model="addForm.catename"
          placeholder="请输入分类名"
        ></el-input>
      </el-form-item>
      <el-form-item label="分类值" prop="catevalue">
        <el-input
          v-model="addForm.catevalue"
          placeholder="请输入分类值"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="confirmAdd">确认</el-button>
        <el-button @click="reset('addForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "addUser",
  data() {
    return {
      addForm: {
        catename: "",
        catevalue: "",
      },
      addFormRules: {
        catename: [
          {
            type: "string",
            required: true,
            message: "分类名不能为空",
            trigger: "blur",
          },
        ],
        catevalue: [
          {
            type: "string",
            required: true,
            message: "分类值不能为空",
            trigger: "blur",
          },
        ]
      },
    };
  },
  methods: {
    confirmAdd() {
      this.$refs["addForm"].validate(async (valid) => {
        if (valid) {
          const { data } = await this.http({
            method: "post",
            url: "/admin/cate/create",
            data: this.addForm,
          });
          if(data.errno !== 0){
              return this.msg({
                  type: 'error',
                  message: '新增分类失败'
              })
          }
          this.msg({
              type: 'success',
              message: '新增分类成功',
              onClose: () => {
                  this.$refs["addForm"].resetFields()
              }
          })
        } else {
          this.msg({
            type: "error",
            message: "表单信息校验未通过",
          });
        }
      });
    },
    reset(form) {
      // this.addForm = { ...defaultAddForm }
      this.$refs[form].resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
.el-form {
  width: 400px;
}
</style>
